<template>
  <div class="footer">
    <div class="btn-groups">
      <RouterLink to="/rotation">
        <div class="item">
          <button class="toggle-btn">
            <i class="iconfont icon-fuwudiqiu"></i>
          </button>
          <p>地球自转</p>
        </div>
      </RouterLink>
      <RouterLink to="/g2charts">
        <div class="item">
          <button class="toggle-btn">
            <i class="iconfont icon-supervision-full"></i>
          </button>
          <p>控制中心</p>
        </div>
      </RouterLink>
      <RouterLink to="/cityview">
        <div class="item">
          <button class="toggle-btn">
            <i class="iconfont icon-icon-test"></i>
          </button>
          <p>城市视角</p>
        </div>
      </RouterLink>
      <RouterLink to="/bridge">
        <div class="item">
          <button class="toggle-btn">
            <i class="iconfont icon-qiaoliang"></i>
          </button>
          <p>城市桥梁</p>
        </div>
      </RouterLink>
      <RouterLink to="/modelview">
        <div class="item">
          <button class="toggle-btn">
            <i class="iconfont icon-gongchang"></i>
          </button>
          <p>工厂视角</p>
        </div>
      </RouterLink>
      <el-popover
        placement="top"
        :width="100"
        trigger="click"
        popper-style="background-color: #53697670;color:#fff"
      >
        <template #reference>
          <div class="item">
            <button class="toggle-btn">
              <i class="iconfont icon-ruler"></i>
            </button>
            <p>地图测量</p>
          </div>
        </template>
        <div class="popover-w">
          <RouterLink
            v-for="(item, index) in tools"
            :key="index"
            :to="'/mapdraw/' + item"
          >
            <i :class="computeClass(item)"></i>
          </RouterLink>
          
        </div>
      </el-popover>
    </div>
  </div>
</template>
<script setup>
import { RouterLink } from "vue-router";
const computeClass = (item) => {
  return "iconfont query-item icon-" + item;
};
const tools = ["drawPolygonTool", "drawRectTool", "drawCircleTool", "line"];
</script>
<style>
.footer {
  width: 100%;
  height: 8vh;
  position: fixed;
  z-index: 90;
  left: 0;
  bottom: 0;
  background: url("../assets/images/xzd-header.png") no-repeat;
  background-size: cover;
  transform: rotate(180deg);
}
.btn-groups {
  display: flex;
  color: #fff;
  position: absolute;
  left: 50%;
  font-size: 8px !important;
  bottom: 10px;
  transform: translateX(-50%) rotate(180deg);
}

.btn-groups .item {
  margin-left: 20px;
  text-align: center;
}

.btn-groups button {
  margin-bottom: 4px;
  font-size: 8px;
  /* padding: 5px; */
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  outline: none;
  color: #fff;
  background: #53697670;
  /* fallback for old browsers */
  /* Chrome 10-25, Safari 5.1-6 */
  box-shadow: 0 0 5px 3px #333;
  background: linear-gradient(
    to bottom,
    rgba(0, 128, 255, 0.377),
    rgba(0, 128, 255, 0.281)
  );
}

.btn-groups button:hover {
  cursor: pointer;
  background: linear-gradient(
    to bottom,
    rgba(0, 128, 255, 0.6),
    rgba(0, 128, 255, 0.281)
  );
}
a {
  text-decoration: none;
  color: #fff;
}

.el-button + .el-button {
  margin-left: 8px;
}

.popover-w {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.query-item:hover {
  cursor: pointer;
  background: linear-gradient(
    to bottom,
    rgba(0, 128, 255, 0.6),
    rgba(0, 128, 255, 0.281)
  );
}
</style>
